<template>
	<view class="qrCodeTools">

		<view>
			<textarea :class="['text',`${theme}-border-top`,`${theme}-border-bottom`]" focus :maxlength=" -1 "
				:placeholder="$t('QrcodeTool.PleaseenterthecontentoftheQRcodeorlink')" v-model="str" />
		</view>

		<view class="btn-box">
			<!-- <view class="btn" :class="theme+'-bg-abox'">
				<text>上传图片转base64</text>
			</view> -->
			<view class="btn" :class="theme+'-bg-abox'" @click="str=''">
				<text>{{$t('QrcodeTool.Clearcontent')}}</text>
			</view>
			<!-- 	<view class="btn" :class="theme+'-bg-abox'">
				<text>保存图片到本地</text>
			</view> -->
			<view class="btn" :class="theme+'-bg-abox'" @click="go">
				<text>{{$t('QrcodeTool.GenerateQRcode')}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'qrCodeTools',
		data() {
			return {
				str: '',
			}
		},
		methods: {
			go() {
				if (!this.str) {
					return uni.showToast({
						icon: 'none',
						title: '输入内容为空。'
					})
				}
				uni.setStorage({
					key: 'qrcode',
					data: this.str,
					success() {
						uni.navigateTo({
							url: '/pages/tools/qrcode-tool/code/Code'
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.qrCodeTools {
		overflow: hidden;

		textarea {
			box-sizing: border-box;
			overflow-x: hidden;
			padding: 25rpx;
			width: 100%;
			height: 375rpx;
			// border: 2rpx solid #c6cede;
			border-left: 0;
			border-right: 0;
			font-size: 24rpx;
			margin: 200rpx 0 40rpx 0;
			color: #838B8B;
		}

		.btn-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			padding: 0 40rpx;

			.btn {
				width: 45%;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				color: #FFFFFF;
				margin-top: 40rpx;
				font-size: 26rpx;
				cursor: pointer;

				text {
					cursor: pointer;
				}
			}
		}
	}
</style>
>
